<template>
  <div>
    <el-upload 
    list-type="picture-card"
    action="#"
    :limit="1"
    :file-list="fileList"
    :on-preview="preview"
    :on-remove="handleRemove"
    :on-change="changeFile"
    :before-upload="beforeUpload"
    :http-request="upload"
    :class="{disabled: fileComputed }"
    >
    <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog title="图片预览" :visible.sync="showDialog">
        <img :src="imgUrl" style="width:100%" alt="">
    </el-dialog>
    <el-progress v-if="showPercent" style="width: 180px" :percentage="percent" />
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 引入腾讯云cos包
// 实例化COS对象
const cos = new COS({
    SecretId: 'AKIDy52lDOJzRggSzHhqmTv72h7GBtTN1QZT', // 身份识别ID
    SecretKey: 'mKgmcCXguupVxEF2bv2xe5GBpMelcDZg' // 身份密匙
})
export default {
    data () {
        return {
            fileList: [], //图片地址设置为数组
            showDialog: false, // 控制显示弹层
            imgUrl: '',
            showPercent: false,
            percent: 0,
            currentFileUid: '' // 当前图片id
        }
    },
    methods: {
        preview (file) {
            this.imgUrl = file.url
            this.showDialog = true
        },
        handleRemove (file) {
            // file是点击删除的文件
            this.fileList = this.fileList.filter(item => item.uid !== file.uid)
        },
        changeFile (file, fileList) {
             this.fileList = fileList.map(item => item)
        },
        beforeUpload (file) {
            // 文件类型 文件大小
            const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
            if (!types.includes(file.type)) {
                this.$message.error('上传的图片只能是 JPG、GIF、BMP、PNG格式!')
                return false
            }
            // 检查大小
            const maxSize = 5 * 1024 * 1024
            if (maxSize < file.size) {
                this.$message.error('图片大小最大不能超过5M')
                return false
            }
            this.currentFileUid = file.uid // 记住当前的uid
            this.showPercent = true
            return true
        },
        // 上传图片
        upload (parmas) {
            if (parmas.file) {
                // 执行上传操作
                cos.putObject({
                    Bucket: 'hrzdr-1311493939', // 存储桶名称
                    Region: 'ap-guangzhou', // 地域
                    Key: parmas.file.name, // 文件名
                    Body: parmas.file, // 要上传的文件对象
                    StorageClass: 'STANDARD', // 上传的模式类型 直接默认标准模式
                    // 进度条
                    onProgress: (parmas) => {
                        this.percent = parmas.percent * 100
                    }
                }, (err, data) => {
                    if (!err && data.statusCode === 200) {
                        // 此时说明文件上传成功 要获取成功的返回地址
                        this.fileList = this.fileList.map(item => {
                            // 去找谁的uid等于刚刚几率下来的id
                            if (item.id === this.currentFileUid) {
                                // 将成功的地址赋值给原来的url属性
                                return { url: 'http://' + data.Location, upload: true}
                            }
                            return item
                        })
                        setTimeout(() => {
                            this.showPercent = false // 隐藏进度条
                            this.percent = 0 // 进度归0
                        }, 2000)
                    }
                })
            }
        }
    },
    computed: {
        // 判断是否已经上传完了一张图片
        fileComputed () {
            return this.fileList.length === 1
        }
    }
}
</script>

<style>
 .disabled .el-upload--picture-card {
    display: none
 }
</style>